
<template>
	<view class="container">
		<view class="content">
			<view class="project_list" v-for="(item,index) in qianduanguanli_data.page_list" :key="index" :class="index==qianduanguanli_data.page_list.length-1?'bottom-margin':''" @click="to_page_detail(item.id)">
				<view class="top">{{item.page_name}}</view>
				<view class="down">
					<view class="project_log">
						<image class="log_img" :src="item.souluetu"></image>
					</view>
					<view class="bilie">
						
						<view class="content1">
							<view class="title_name">{{item.progress_name}}</view>
							<view class="cu-progress round striped active">
								<view class="bg-red" :style="[{ width:item.progress_value}]"></view>
							</view>
							<view class="title_name">{{item.progress_value}}</view>
						</view>
						
					</view>
				</view>
			</view>
			<view class="add_project" @click="to_addPage">创建页面</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				qianduanguanli_data: {},
			}
		},
		async onLoad(option) {
			// this.gongzuotaishouye_data.canshu1 = option.canshu1;
			this.qianduanguanli_data = await this.$api.json('qianduanguanli_data');
			console.log(JSON.stringify(this.qianduanguanli_data));
		},
		onShow() {
			// let params = {
			// 	"canshu1": this.gongzuotaishouye_data.canshu1
			// };
			// upload_data(params, 'GET', this.$api.Apiurl.gongzuotaishouye_urlData.url, (res) => {
			// 	if (res.data.code == 1) {
			// 		this.gongzuotaishouye_data = this.$api.Json.gongzuotaishouye_data;
			// 	} else {
			// 		msg(res.data.msg);
			// 	}
			// });

		},
		methods: {
			to_addPage(){
				uni.navigateTo({
					url:"../addpage/addpage"
				})
			},
			to_page_detail(id){
				uni.navigateTo({
					url:"../editpage/editpage?id="+id
				})
			}
		}
	}
</script>

<style lang='scss'>
	* {
		/* border: 2upx solid #007AFF; */
	}
	.add_project{
		height: 68upx;
		line-height: 68upx;
		text-align:center;
		background-color: $page-color-base;
		width: 100%;
		/* border-radius: 20upx; */
		margin: 0upx auto;
		position: fixed;
		bottom:0upx;
		color: #FFFFFF;
		letter-spacing: 40upx;
	}
	.project_list {
		/* height: 150upx; */
		/* background-color: #dfdfdf; */
		border: 2upx solid #dfdfdf;
		padding-bottom: 10upx;
		width: 90%;
		margin: 10upx auto;
		margin-bottom: 20upx;
	}
	.top{
		width: 90%;
		margin: 10upx auto;
		font-size: 28upx;
		border-bottom: 2upx solid #dfdfdf;
		color: #7f7f7f;
	}
	.down {
		display: flex;
		align-items: center;
	}

	.project_log {
		height: 120upx;
		flex: 2;
	}

	.log_img {
		width: 120upx;
		height: 120upx;
		margin-left: 20upx;
	}

	.bilie {
		display: flex;
		height: 120upx;
		flex: 6;
		align-items:center;
		justify-content: start;
	}

	.flex {
		display: flex;
	}

	.content1 {
		display: flex;
		align-items: center;
		/* margin: 8upx auto; */
		width: 95%;
		
	}

	.title_name {
		font-size: 24upx;
		width: 80upx;
		color: #858585;
	}
	.bottom-margin{
		margin-bottom: 100upx;
	}
	/* ==================
	         进度条
	 ==================== */

	.cu-progress {
		overflow: hidden;
		height: 20upx;
		background-color: #ebeef5;
		display: inline-flex;
		align-items: center;
		width: 90%;
		border-radius: 2760px;
		margin-right: 5%;

	}

	.cu-progress view {
		width: 0;
		height: 100%;
		align-items: center;
		display: flex;
		justify-items: flex-end;
		justify-content: space-around;
		font-size: 20upx;
		color: #ffffff;
		transition: width 0.6s ease;
		background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
		background-size: 72upx 72upx;
		animation: progress-stripes 2s linear infinite;
	}

	.bg-green {
		background-color: #39B54A;
	}

	.bg-red {
		background-color: #e54d42;
	}

	.bg-cyan {
		background-color: #1cbbb4;
	}

	@keyframes progress-stripes {
		from {
			background-position: 72upx 0;
		}

		to {
			background-position: 0 0;
		}
	}
</style>
